<template>
  <nav class="ui_border_t">
      <ul>
          <li><router-link to="/home"><div class="icon-con"><i class="icon icon-ybbindexon"></i></div><p>首页</p></router-link></li>
          <li><router-link to="/client"><div class="icon-con"><i class="icon icon-wode"></i></div><p>客户</p></router-link></li>
          <!-- <li><router-link to="/statistics"><div class="icon-con"><i class="icon icon-xiadan"></i></div><p>统计</p></router-link></li> -->
          <li><router-link to="/generalize"><div class="icon-con"><i class="icon  icon-fenlei1"></i></div><p>推广</p></router-link></li>
      </ul>
  </nav>
</template>

<script>


export default {
  name: "tabnav",
//   computed: {
//     ...mapGetters(["cartCount"])
//   }
};
</script>

<style lang="scss">
nav {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 3.5rem;
  background: #fff;
  z-index: 100;
  ul {
    overflow: hidden;
  }
  li {
    width: 33.33%;
    float: left;
    text-align: center;
    a {
      text-decoration: none;
      color: #676b6f;
    }
    .router-link-active {
      color: #25b02a;
    }
    p {
      font-size: 0.9rem;
      line-height: 1.5rem;
    }
  }
  .icon-con {
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    position: relative;
    i {
      font-size: 1.5rem;
    }
    span {
      background: #ff4e4e;
      color: #fff;
      line-height: 1.1rem;
      height: 1rem;
      padding: 0 0.4rem;
      border-radius: 0.5rem;
      font-size: 0.8rem;
      position: absolute;
      left: 50%;
      top: 0.1rem;
    }
  }
}
.icon-fenlei1 {
  vertical-align: middle;
  position: relative;
  top: 2px;
}
</style>